<script lang="ts">
    export default {
        name: 'order',
    };
</script>

<script setup lang="ts">
    import { computed, onMounted, ref, unref } from 'vue';
    import { showConfirmDialog, showToast, showLoadingToast, closeToast } from 'vant';
    import { useOrderInfo } from '@/store/modules/evaluate'
    import { useRouter } from 'vue-router'
    import { useI18n } from 'vue-i18n';
    import API_ORDER from '@/apis/order';
    const { t } = useI18n();
    let appOrder = useOrderInfo()
    onMounted(() => {

    });
    let tabList = ref([
        {
            id: '0',
            name: t('home.all')
        },
        {
            id: '1',
            name: t('home.Pendingpayment')
        },
        {
            id: '2',
            name: t('home.Awaitingshipment')
        },
        {
            id: '3',
            name: t('home.Waitingforreceipt')
        },
        {
            id: '4',
            name: t('home.Awaitingevaluation')
        },
    ])
    let router = useRouter()
    // 列表相关状态
    let list = ref([]);
    let loading = ref(false);
    let finished = ref(false);
    let active = ref(0);
    let params = ref({
        type: 'all',
        limit: 5,
        page: 1
    })
    let showEvaluate = ref(false)
    // 加载更多数据
    const onLoad = async () => {
        finished.value = false;
        loading.value = true;
        let res = await API_ORDER.orderList(params.value)
        if (res.code == 1) {
            list.value = [...list.value, ...res.data.data]
            loading.value = false;
            params.value.page++
            if (res.data.data.length < params.value.limit) {
                // 没有更多数据
                finished.value = true;
            }
        }

    }
    let changeTab = () => {
        params.value.page = 1
        list.value = []
        if (active.value == 0) {
            params.value.type = 'all'
        } else if (active.value == 1) {
            params.value.type = 'unpaid'
        } else if (active.value == 2) {
            params.value.type = 'nosend'
        }
        else if (active.value == 3) {
            params.value.type = 'noget'
        }
        else if (active.value == 4) {
            params.value.type = 'nocomment'
        }
        onLoad()

    }
    // 继续支付
    let goPay = (data) => {
        router.replace({
            path: '/checkout',
            query: {
                id: data.order_sn
            }
        })

    }
    // 取消订单
    let cancelOrder = async (data) => {

        let res = await API_ORDER.orderCancel({ id: data.id })
        if (res.code == 1) {
            showToast(res.msg)
            params.value.page = 1
            list.value = []
            onLoad()
        }
    }
    // 删除订单
    let deleteOrder = async (data) => {
        let res = await API_ORDER.orderDelete({ id: data.id })
        if (res.code == 1) {
            showToast(res.msg)
            params.value.page = 1
            list.value = []
            onLoad()
        }
    }
    // 确认订单
    let confirmGoods = async (data) => {
        let res = await API_ORDER.orderConfirm({ id: data.id })
        if (res.code == 1) {
            showToast(res.msg)
            params.value.page = 1
            list.value = []
            onLoad()
        }
    }
    // 申请退款
    let refundMoney = async (data) => {
        let res = await API_ORDER.orderApplyRefund({ id: data.id })
        if (res.code == 1) {
            showToast(res.msg)
            params.value.page = 1
            list.value = []
            onLoad()
        }
    }
    // 关闭弹出
    const closeC = (data) => {
        showEvaluate.value = false
        list.value = []
        params.value.page = 1
        onLoad()
    }
    let goEvaluate = (data) => {
        showEvaluate.value = true
        appOrder.setEvaluateData(data)
    }
</script>

<template>
    <div>
        <div class="title">{{t('home.YourOrder')}}</div>
        <van-tabs v-model:active="active" @change="changeTab">
            <div class="order_list">
                <van-tab :title="i.name" v-for="i in tabList" :key="i.id">
                    <van-list v-model:loading="loading" :finished="finished" :finished-text="t('home.Nomore')"
                        @load="onLoad">
                        <div class="order_item" v-for="item in list" :key="i.id">
                            <div class="flex al-center jus-bet f14">
                                <span>{{t('home.Ordernumber')}}:{{item.order_sn}}</span>
                                <span><van-tag size="medium" color="#1b6ef3">{{item.status_text}}</van-tag></span>
                            </div>
                            <van-card :num="child.goods_num" tag="" :price="child.goods_price"
                                v-for="child in item.items" desc="" :title="child.goods_title" currency="$"
                                :thumb="child.goods_image">
                                <template #tags>
                                    <van-tag plain type="primary" style="margin: 8px 5px 0 0;"
                                        v-for="size in child.goods_sku_text">{{size.name}}</van-tag>

                                </template>
                            </van-card>
                            <div class="footer">
                                <van-button round type="success" size="small" @click="goPay(item)"
                                    v-if="item.status_code==='unpaid'">{{t('home.Continuetopay')}}
                                </van-button>
                                <van-button round color="#666" size="small" @click="cancelOrder(item)"
                                    v-if="item.status_code==='unpaid'">{{t('home.Cancelanorder')}}
                                </van-button>
                                <van-button round type="success" size="small" v-if="item.status_code==='nocomment'"
                                    @click="goEvaluate(item)">{{t('home.evaluate')}}
                                </van-button>
                                <van-button round type="default" size="small" @click="refundMoney(item)"
                                    v-if="item.status_code==='completed'||item.status_code==='nosend'">
                                    {{t('home.RequestRefund')}}
                                </van-button>
                                <van-button round type="primary" size="small" @click="confirmGoods(item)"
                                    v-if="item.status_code==='noget'">{{t('home.confirmgoods')}}
                                </van-button>
                                <van-button round color="#bd2c4b" size="small"
                                    v-if="item.status_code==='cancel'||item.status_code==='completed'"
                                    @click="deleteOrder(item)">
                                    {{$t('home.Deleteorder')}}</van-button>
                            </div>
                        </div>

                    </van-list>
                </van-tab>
            </div>
        </van-tabs>
        <Shop_evaluate :show="showEvaluate" @closeLan="closeC"></Shop_evaluate>
    </div>
</template>

<style lang="less" scoped>
    .title {
        margin: 6px;
        font-size: 18px;
        font-weight: 600;
    }

    .order_list {
        padding: 10px;

        .order_item {
            margin: 8px 0;
            background-color: #f7f8fa;
            padding: 10px;
            border-radius: 6px;

            .footer {
                text-align: right;

                button {
                    margin-right: 5px;
                }
            }
        }
    }
</style>